import React,{useEffect,useState} from "react";
import {View,Text,Image,StyleSheet,ScrollView} from "react-native";
import {IRecommends} from "../../models/recommends";
import Touchable from "../../components/Touchable";
import {connect, ConnectedProps} from 'react-redux';
import {IUserInfo} from "../../models/user";
import {RootState} from '@/models/index';
import {getWidth} from "../../utils";

const mapStateToProps = ({users}: RootState) => {
  return {
    userInfo:users?.userInfo,
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
  route:any
}

const RecommendInfo = (props:IProps) => {
  const {route,userInfo,navigation} = props;
  const [user,setUser] = useState<any>();
  useEffect(()=>{
    // console.log("userInfo",userInfo);
    const item = userInfo && userInfo.filter(i => {
      return i._id === route.params.item.owner_id
    });
    setUser(item && item[0]);
    console.log("item111111111111",item && item[0].username)
  },[])
  const handlePress = () => {
    console.log("buy");
  };
  const handleInfo = () => {
      navigation.navigate("PrincipalSheet",{
        selectedId:user && user._id
      });
  }
  return (
    <View style={styles.recommendInfo}>
      <ScrollView>
      <Image source={{uri:route.params.item.recommend_images[0].r_url}} style={styles.image}></Image>
      <View style={styles.content}>
      <View><Text style={styles.text1}>{route.params.item.recommend_title}</Text></View>
      <View><Text style={styles.text2}>{route.params.item.recommend_detail}</Text></View>
      <View><Text style={styles.text2}>拍摄时长:{route.params.item.recommend_time}小时</Text></View>
      <View><Text style={styles.text3}>￥{route.params.item.recommend_price}</Text></View>
      <View>
        <Text style={styles.text4}>摄影师</Text>
        <Touchable style={styles.info} onPress={handleInfo}>
          <Image source={{uri:user && user.scurpture}} style={styles.image2}></Image>
         <View style={styles.right}>
         <Text style={styles.text5}>{user && user.username}</Text>
          <Text style={styles.text5}>{user && user.age}岁</Text>
          <Text style={styles.text5}>{user && user.experience}年摄影经验</Text>
          <Text style={styles.text5}>个人{user && user.identity}</Text>
         </View>
        </Touchable>
      </View>
      <View>
        <Text style={styles.text4}>客片推荐</Text>
        {
          route.params.item.recommend_images && route.params.item.recommend_images.map( (item:any) => {
            return (
              <Image source={{uri:item.r_url}} style={styles.image1}></Image>
            )
          })
        }
      </View>
      <Touchable style={styles.btn} onPress={handlePress}>
        <Text style={styles.btnText}>购买套餐</Text>
      </Touchable>
      </View>
      </ScrollView>
    </View>
  )
}
const styles = StyleSheet.create({
  recommendInfo:{
    flex:1
  },
  image:{
    flex:1,
    height:465
  },
  content:{
    padding:10
  },
  text1:{
    fontSize:20,
    fontWeight:"700",
    color:"black"
  },
  text2:{
    padding:5,
    fontSize:16,
  },
  text3:{
    color:"rgba(144,0,0,0.9)",
    fonrWeight:"700",
    fontSize:24,
  },
  text4:{
    paddingVertical:5,
    fontSize:16,
    color:"black",
  },
  image1:{
    flex:1,
    height:250,
    marginVertical:5,
    borderRadius:5
  },
  btn:{
    width:"100%",
    height:60,
    marginTop:20,
    display:"flex",
    justifyContent:"center",
    alignItems:"center",
  },
  btnText:{
    width:getWidth(50),
    height:45,
    lineHeight:45,
    color:"#fff",
    fontSize:20,
    textAlign:"center",
    backgroundColor:"#A75E5E",
    borderRadius:30,
  },
  info:{
    display:"flex",
    flexDirection:"row",
    backgroundColor:"#fff",
    padding:10,
    borderRadius:5
  },
  image2:{
    width:88,
    height:88,
    borderRadius:88
  },
  right:{
    marginLeft:20,
    display:"flex",
    justifyContent:"space-around"
  },
  text5:{
    color:"black",
    fontSize:14,
  }
})
export default connector(RecommendInfo);